<template>
  <div class="todolist-contain">
    <input type="text" class="input-m" v-model="val" @keyup.enter="addTodo">
    <div class="content">
      <ul>
        <li class="col" v-for="(list, index) in lists.arr" :key="index">
          <span class="text" @dblclick="dbClilck">{{list.title}}</span>
          <i v-if="list.title" class="delete" @click="deletes(lists.arr,index)">删除</i>
        </li>
      </ul>
    </div>
    <div class="axle">x轴：{{x}}，，--，，y轴：{{y}}</div>
  </div>
</template>

<script setup>
// import {ref, reactive, toRefs} from 'vue'
import useTodos from './add/useTodos'
import deleteTodos from './delete/delete'
import { coordinate } from './coordinate/coordinate'

let { val, lists, addTodo } = useTodos()
let { deletes } = deleteTodos()
let {x, y} = coordinate()
</script>

<style scoped lang="scss">
.todolist-contain {
  padding: 20px 30px;
  background: #ccc;
  .input-m {
    width: 100%;
    height: 60px;
    padding: 0 10px;
    font-size: $font16; /*no*/
    outline: 0;
  }

  .content {
    margin-top: 20px;
    font-size: $font16; /*no*/
    .col {
      display: flex;
      padding-top: 10px;
      .text {
        flex: .8;
      }
      .delete {
        flex: .1;
        margin-left: 15px;
        color: #ff0000;
        cursor: pointer;
      }
    }
  }
  .axle {
    margin-top: 20px;
    font-size: $font16; /*no*/
  }
}
</style>